<template>
	<div>
		<van-field v-if="!item.hide" :value="formData[item.name]"
			:label-class="item.rules && item.rules[0].required ? 'required' : ''" v-bind="bindOptions"
			@click="showPicker = true">
			<template #label>
				{{ item.label }}
				<van-icon v-if="item.labelIcon" :name="item.labelIcon" />
				<hr-status v-if="item.labelTag" :status="{ id: item.labelTag.id, name: item.labelTag.name }" oval />
			</template>
		</van-field>
		<van-popup v-model="showPicker" position="bottom" :style="{ maxHeight: '40%' }" round>
			<h3 class="title van-hairline--bottom">选择{{ item.label }}</h3>
			<van-cell v-for="option in item.options" :key="option.code" :title="option.value"
				@click="handleClick(option)">
				<template v-if="option.select" #right-icon>
					<van-icon name="success" class="success-icon" />
				</template>
			</van-cell>
		</van-popup>
	</div>
</template>
<script>
	import base from "../base.js";

	export default {
		name: "hr-picker",
		mixins: [base],
		data() {
			return {
				showPicker: false,
			};
		},
		methods: {
			handleClick(option) {
				// options选中状态
				this.item.options.forEach((item) => {
					this.$set(item, "select", false);
				});
				option.select = true;
				this.formData[this.item.name] = option.value;
				this.showPicker = false;
				this.$emit("handle-click", this.item, option);
			},
		},
	};
</script>
<style lang="scss" scoped>
	.title {
		padding: 12px 0;
		font-size: 16px;
		text-align: center;
	}

	.van-cell {
		padding: 15px 12px;

		&.column {
			flex-direction: column;
			padding: 10px 12px;

			// /deep/ .van-field__label {
			::v-deep .van-field__label {
				width: 100%;

				&.required {
					&::after {
						position: relative;
						top: 2px;
						margin-left: 2px;
						color: #f02737;
						content: "*";
					}
				}
			}
		}
	}

	.van-cell:last-child::after {
		display: block;
	}

	// Popup圆角
	.van-popup--bottom.van-popup--round {
		border-radius: 6px 6px 0 0;
	}
</style>